<template>
	<div>
		<!-- 年度开工率 -->
		<Echart id="dialogChart1" :options="options" height="330px" width="100%" />
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		data() {
			return {
				options: {},
			};
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						tooltip: {
							trigger: "axis",
							backgroundColor: "rgba(255,255,255,0.1)",
							axisPointer: {
								type: "shadow",
								label: {
									show: true,
									backgroundColor: "#7B7DDC"
								}
							}
						},
						legend: {
							data: ["东进水流量", "西进水流量", "出水流量", "东组二沉池SS", "西组二沉池SS", "气浮池SS", "建议值"],
							textStyle: {
								color: "#B4B4B4"
							},
							top: "0%"
						},
						grid: {
							x: "14%",
							width: "80%",
							y: "15%"
						},
						xAxis: {
							data: newData.category,
							axisLine: {
								lineStyle: {
									color: "#B4B4B4"
								}
							},
							axisTick: {
								show: false
							}
						},
						yAxis: [{
								splitLine: {
									show: false
								},
								name: '流量 (m3/h）',
								axisLine: {
									lineStyle: {
										color: "#B4B4B4"
									}
								},

								axisLabel: {
									formatter: "{value}"
								}
							},
							{
								name: 'SS (mg/L)',
								position: 'left',
								offset: 80,
								splitLine: {
									show: false
								},
								axisLine: {
									lineStyle: {
										color: "#B4B4B4"
									}
								},

								axisLabel: {
									formatter: "{value}  "
								}
							},

							{
								name: '建议值 (kg)',
								splitLine: {
									show: false
								},
								axisLine: {
									lineStyle: {
										color: "#B4B4B4"
									}
								},

								axisLabel: {
									formatter: "{value}  "
								}
							}
						],
						series: [{
								name: "东进水流量",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,

								data: newData.lineData1
							},
							{
								name: "西进水流量",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,

								data: newData.lineData2
							},
							{
								name: "出水流量",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 0,

								data: newData.lineData3
							},
							{
								name: "东组二沉池SS",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 1,
								lineStyle: {
									type: 'dotted'
								},
								data: newData.lineData4
							},
							{
								name: "西组二沉池SS",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 1,
								lineStyle: {
									type: 'dotted'
								},
								data: newData.lineData5
							},
							{
								name: "气浮池SS",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 1,
								lineStyle: {

									type: 'dotted'
								},
								data: newData.lineData6
							},
							{
								name: "建议值",
								type: "line",
								smooth: true,
								showAllSymbol: true,
								symbol: "emptyCircle",
								symbolSize: 8,
								yAxisIndex: 2,
								lineStyle:{color:'#3a3960'},
								areaStyle: {color:'#3a3960'},
								data: newData.lineData6
							}
						]
					}
				},
				immediate: true,
				deep: true
			},
		},
	}
</script>